<template>
  <div class="app-container home">
    <div ref="company" class="company-container" :style="{ height:  companyHeight + 'px' }" >
      <el-carousel :autoplay="false" direction="vertical" :style="{ height:  companyHeight + 'px' }" >
        <el-carousel-item v-for="item in carouselImgList" :key="item">
          <el-image :src="item" style="width: 100%; height: auto;" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <el-divider></el-divider>
    <div class="card-container">
      <el-card>
        <div ref="shopGoods" style="height: 400px; width: 100%"></div>
      </el-card>
    </div>
    <el-divider></el-divider>
    <div class="footer-container"></div>
  </div>
</template>
<script>
import { getgoodsTypeNumEcharts } from '@/api/goods/shop'
import * as echarts from "echarts";

export default {
  name: 'Home',
  data() {
    return {
      companyHeight: 600,
      version: '1.0.0',
      carouselImgList: [],
      shopGoodsEcharts: null,
    }
  },
  computed: {
    isCollapse() {
      return !this.$store.state.app.sidebar.opened;
    },
  },
  mounted() {
    this.init();
    this.initCarouselWidth();
    this.$nextTick(() => {
      window.addEventListener('resize', this.initCarouselWidth);
    });
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.initCarouselWidth);
  },
  methods: {
    initCarouselWidth() {
      const width = window.innerWidth;
      const sidebarWidth = this.isCollapse ? 54 : 200;
      const scWidth = width - sidebarWidth - 45;
      this.companyHeight = scWidth/2;
      console.log(width, sidebarWidth, scWidth, this.companyHeight);
    },
    init() {
      this.carouselImgList = [
        'https://img11.360buyimg.com/cms/jfs/t1/222728/10/7581/492525/61cd448bE2551352b/1b48a79923b7fb68.jpg',
        'https://img11.360buyimg.com/cms/jfs/t1/216512/26/9519/290533/61cd448bEb37deacb/276a96ae7a7bf562.jpg',
        'https://img14.360buyimg.com/cms/jfs/t1/222230/5/7706/688672/61cd4390E8fda50ba/22e6a3df9451124f.jpg',
      ];
      this.initShopGoodsEcharts();
      this.refreshShopGoodsEcharts();
    },
    initShopGoodsEcharts() {
      this.shopGoodsEcharts = echarts.init(this.$refs.shopGoods);
    },
    refreshShopGoodsEcharts() {
      getgoodsTypeNumEcharts().then(res => {
        const options = res.data;
        this.shopGoodsEcharts.setOption(options);
      })
    }
  },
}
</script>

<style scoped>
.app-container {
  display: flex;
  flex-wrap: wrap;
}
.company-container {
  width: 100%;
}
::v-deep .el-carousel__container {
  height: 100%;
}
.card-container {
  width: 50%;
  height: 435px;
}
.footer-container {
  width: 100%;
  height: 20px;
}
</style>
